<form role="form" action="" class="frm-operate" method="post">
    <div class="card card-primary card-tabs shadow-none">
        <div class="card-header">
            <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-three-home-tab" data-toggle="pill" href="#custom-tabs-three-home" role="tab" aria-controls="custom-tabs-three-home" aria-selected="true">{:lang("Base")}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-seo-tab" data-toggle="pill" href="#custom-tabs-seo" role="tab" aria-controls="custom-tabs-seo" aria-selected="true">{:lang("More")}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-more-tab" data-toggle="pill" href="#custom-tabs-more" role="tab" aria-controls="custom-tabs-more" aria-selected="true">{:lang("Extended field")}</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="custom-tabs-three-tabContent">
                <div class="tab-pane fade active show" id="custom-tabs-three-home" role="tabpanel" aria-labelledby="custom-tabs-three-home-tab">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">{:lang("Column type")}: </label>
                        <div class="col-sm-8">
                            {:build_radios('row[type]',['category'=>lang('Category home'),'list'=>lang('Lists'),'link'=>lang('Other links')],'list',['id'=>'frm-type','class'=>'form-control'])}
                        </div>
                    </div>
                    <div class="form-group row model_id_html">
                        <label for="frm-model_id" class="col-sm-2 col-form-label">{:lang("Owning model")}: </label>
                        <div class="col-sm-8">
                            <input type="text" id="frm-model_id"
                                   class="form-control selectpage"
                                   name="row[model_id]"
                                   data-select-only="true"
                                   data-pagination="false"
                                   value="{$model_id}"
                                   data-data="{:url('/cms.model/index')}" >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-name" class="col-sm-2 col-form-label">{:lang("Superior column")}: </label>
                        <div class="col-sm-8">
                            {:build_select('row[parent_id]',$parent_list,$sedPid,['id'=>'frm-parent_id','class'=>'form-control'])}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-name" class="col-sm-2 col-form-label">{:lang("Column name")}|{:lang("English")}: </label>
                        <div class="col-sm-8">
                    <textarea class="form-control" id="frm-name" name="row[name]" rows="3" placeholder="例如：
国内新闻|china
国际新闻|world" data-rule="required"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-url" class="col-sm-2 col-form-label">{:lang("link")}: </label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="frm-url" name="row[url]" placeholder="{:lang("Specify the column address, and the 'other link' type is the jump address")}">
                        </div>
                    </div>
                    <div class="form-group row hiddenClass">
                        <label for="frm-category_tpl" class="col-sm-2 col-form-label">{:lang("Column home")}: </label>
                        <div class="col-sm-8">
                            <input type="text" id="frm-category_tpl"
                                   class="form-control selectpage"
                                   name="row[category_tpl]"
                                   data-select-only="true"
                                   data-key-field="name"
                                   data-pagination="false"
                                   data-show-field="name"
                                   data-multiple="false"
                                   data-data="{:url('/cms.model/getTplName',['type'=>'category'])}" >
                        </div>
                    </div>
                    <div class="form-group row hiddenClass">
                        <label for="frm-list_tpl" class="col-sm-2 col-form-label">{:lang("List template")}: </label>
                        <div class="col-sm-8">
                            <input type="text" id="frm-list_tpl"
                                   class="form-control selectpage"
                                   name="row[list_tpl]"
                                   data-select-only="true"
                                   data-key-field="name"
                                   data-pagination="false"
                                   data-show-field="name"
                                   data-multiple="false"
                                   data-data="{:url('/cms.model/getTplName',['type'=>'list'])}" >
                        </div>
                    </div>
                    <div class="form-group row hiddenClass show-html">
                        <label for="frm-show_tpl" class="col-sm-2 col-form-label">{:lang("Content template")}: </label>
                        <div class="col-sm-8">
                            <input type="text" id="frm-show_tpl"
                                   class="form-control selectpage"
                                   name="row[show_tpl]"
                                   data-select-only="true"
                                   data-key-field="name"
                                   data-pagination="false"
                                   data-show-field="name"
                                   data-multiple="false"
                                   data-data="{:url('/cms.model/getTplName',['type'=>'show'])}" >
                        </div>
                    </div>
                    <div class="form-group row hiddenClass page-html">
                        <label for="frm-page_tpl" class="col-sm-2 col-form-label">{:lang("Page template")}: </label>
                        <div class="col-sm-8">
                            <input type="text" id="frm-page_tpl"
                                   class="form-control selectpage"
                                   name="row[page_tpl]"
                                   data-select-only="true"
                                   data-key-field="name"
                                   data-pagination="false"
                                   data-show-field="name"
                                   data-multiple="false"
                                   data-data="{:url('/cms.model/getTplName',['type'=>'page'])}" >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-weigh" class="col-sm-2 col-form-label">{:lang("Weigh")}: </label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="frm-weigh" name="row[weigh]" value="0" placeholder="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">{:lang("Navigation display")}: </label>
                        <div class="col-sm-8">
                            {:build_radios('row[ismenu]',['1'=>lang('Show'),'0'=>lang('Hide')])}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="custom-tabs-seo" role="tabpanel" aria-labelledby="custom-tabs-seo">
                    <div class="form-group row">
                        <label for="frm-seo_title" class="col-sm-2 col-form-label">SEO{:lang('Title')}: </label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="frm-seo_title" name="row[seo_title]" placeholder="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-seo_keywords" class="col-sm-2 col-form-label">{:lang("SEO keywords")}: </label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="frm-seo_keywords" name="row[seo_keywords]" placeholder="" value="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-seo_desc" class="col-sm-2 col-form-label">{:lang("SEO description")}: </label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="frm-seo_desc" name="row[seo_desc]" rows="3" placeholder=""></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="frm-image" class="col-sm-2 col-form-label">{:lang("Column thumbnail")}</label>
                        <div class="col-sm-8 fileGroup">
                            <div class="file-btn">
                                <input type="text" class="form-control txt-files" id="frm-image" name="row[image]" placeholder="{:lang("Column thumbnail")}">
                                <input type="button"
                                       class="btn btn-default ml-1 btn-imgUpload"
                                       data-mimetype="image/*"
                                       data-multiple="false"
                                       data-field="frm-image"
                                       value="{:lang('Upload image')}">
                                <input type="button"
                                       class="btn btn-primary ml-1 btn-imgSelect"
                                       data-mimetype="image/jpeg,image/png"
                                       data-multiple="false"
                                       data-field="frm-image"
                                       value="{:lang('Select image')}">
                            </div>
                            <div class="file-preview row mt-2"></div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">{:lang("Pop-up method")}: </label>
                        <div class="col-sm-8">
                            {:build_radios('row[target]',['_self'=>lang('Current window'),'_blank'=>lang('New window')],'_self')}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">{:lang("Status")}: </label>
                        <div class="col-sm-8">
                            {:build_radios('row[status]',['normal'=>lang('Normal'),'hidden'=>lang('Hidden')])}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="custom-tabs-more" role="tabpanel" aria-labelledby="custom-tabs-more">
                {$html|raw}
                </div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row justify-content-around">
                <div class="col-sm-8">
                    <button type="submit" class="btn btn-primary btn-submit">{:lang('Submit')}</button>
                    <button type="reset" class="btn btn-default">{:lang('Reset')}</button>
                </div>
            </div>
        </div>
    </div>
</form>

{block:script}
<script>
    require(['jquery','Form','layer','selectpage','adminlte'], function ($, Form, undefined) {
        Form.api.init({
            before: function (data) {
                var status = 1;
                $.each(data, function (key, value) {
                    if (value.name=='row[model_id]' && value.value.length==0 && $("input[name='row[type]']:checked").val()!='link') {
                        layer.msg("{:lang('Please select a model')}");
                        status = 0;
                        return false;
                    } else if (value.name=='row[category_tpl]' && value.value.length==0 && $("input[name='row[type]']:checked").val()=='category') {
                        layer.msg("{:lang('Please select the section homepage')}");
                        status = 0;
                        return false;
                    } else if (value.name=='row[list_tpl]' && value.value.length==0 && $("input[name='row[type]']:checked").val()=='list') {
                        layer.msg("{:lang('Please select a list template')}");
                        status = 0;
                        return false;
                    } else if (value.name=='row[show_tpl]' && value.value.length==0 && $("input[name='row[type]']:checked").val()=='list') {
                        layer.msg("{:lang('Please select a content template')}");
                        status = 0;
                        return false;
                    } else if (value.name=='row[page_tpl]' && value.value.length==0 && $("input[name='row[type]']:checked").val()=='link' && $("input[name='row[model_id]']").val().length!=0) {
                        layer.msg("{:lang('Please select a page template')}");
                        status = 0;
                        return false;
                    }
                });
                if (status) {
                    return data;
                }
                return false;
            }
        });

        $("input[name='row[type]']").change(function () {
            $('.hiddenClass').hide();
            if ($("input[name='row[type]']:checked").val() == 'link') {
                $('.page-html').show();
            } else if ($("input[name='row[type]']:checked").val() == 'list') {
                $('.show-html').show();
                $('input[name="row[list_tpl]"]').parents('.hiddenClass').show();
            } else {
                $('input[name="row[category_tpl]"]').parents('.hiddenClass').show();
            }
            $('.selectpage').selectPageClear();
        });
        $("input[name='row[type]']").trigger('change');

        $("input[name='row[model_id]']").change(function () {
            let model_id = $(this).val();
            if (model_id) {
                if ($("input[name='row[type]']:checked").val() == 'link') {
                    Util.ajax({ url:"{:url('/cms.model/getTplName',['type'=>'page'])}" }, '', function (data) {
                        $('#frm-page_tpl').val(data[0] && data[0].name ? data[0].name:'');
                        $('#frm-page_tpl').selectPageRefresh();
                        return false;
                    });
                } else if ($("input[name='row[type]']:checked").val() == 'list') {
                    Util.ajax({ url:"{:url('/cms.model/getTplName',['type'=>'list'])}" }, '', function (data) {
                        $('#frm-list_tpl').val(data[0] && data[0].name ? data[0].name:'');
                        $('#frm-list_tpl').selectPageRefresh();
                        return false;
                    });
                    Util.ajax({ url:"{:url('/cms.model/getTplName',['type'=>'show'])}" }, '', function (data) {
                        $('#frm-show_tpl').val(data[0] && data[0].name ? data[0].name:'');
                        $('#frm-show_tpl').selectPageRefresh();
                        return false;
                    });
                } else {
                    Util.ajax({ url:"{:url('/cms.model/getTplName',['type'=>'category'])}" }, '', function (data) {
                        $('#frm-category_tpl').val(data[0] && data[0].name ? data[0].name:'');
                        $('#frm-category_tpl').selectPageRefresh();
                        return false;
                    });
                }
            } else {
                $('#frm-category_tpl').selectPageClear();
                $('#frm-show_tpl').selectPageClear();
                $('#frm-list_tpl').selectPageClear();
                $('#frm-page_tpl').selectPageClear();
            }
        });
        $("input[name='row[model_id]']").trigger('change');
    })
</script>
{/block:script}
